{% extends 'dashboard/base.html' %}

{% block title %}{% if category %}编辑分类 - {{ category.name }}{% else %}添加分类{% endif %} - 巧巧点餐管理后台{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2 class="card-title">{% if category %}编辑分类 - {{ category.name }}{% else %}添加分类{% endif %}</h2>
        <a href="{% url 'dashboard:category_list' %}" class="btn btn-light">
            <i class="fas fa-arrow-left"></i> 返回列表
        </a>
    </div>
    <div class="card-body form-card-body">
        <form method="post" action="{% if category %}{% url 'dashboard:category_edit' category_id=category.id %}{% else %}{% url 'dashboard:category_add' %}{% endif %}" enctype="multipart/form-data">
            {% csrf_token %}
            
            <div class="row">
                <div class="col-md-8">
                    <!-- 左侧：基本信息 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-info-circle mr-2"></i>基本信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="name" class="required">分类名称</label>
                                <input type="text" id="name" name="name" class="form-control" value="{{ category.name|default:'' }}" required>
                                <small class="form-text text-muted">简洁明了的分类名称，如"热菜"、"凉菜"等</small>
                            </div>
                            
                            <!-- 注意：分类描述字段在数据库模型中不存在，已移除 -->
                            
                            <div class="form-group">
                                <label for="sort_order">排序</label>
                                <input type="number" id="sort_order" name="sort_order" class="form-control" value="{{ category.sort_order|default:'0' }}" min="0">
                                <small class="form-text text-muted">数字越小排序越靠前（默认为0）</small>
                            </div>
                            
                            <div class="form-group">
                                <div class="checkbox-group">
                                    <div class="form-check">
                                        <input type="checkbox" id="is_active" name="is_active" class="form-check-input" {% if category.is_active|default:True %}checked{% endif %}>
                                        <label for="is_active" class="form-check-label">启用分类</label>
                                    </div>
                                </div>
                                <small class="form-text text-muted">禁用分类后，该分类下的菜品将不会在前台显示</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <!-- 右侧：图标上传 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-image mr-2"></i>分类图标</h5>
                        </div>
                        <div class="card-body">
                            <div class="image-upload-section">
                                <label for="icon_file">上传图标</label>
                                <div class="image-upload-container">
                                    <div class="custom-file-container">
                                        <input type="file" id="icon_file" name="icon_file" class="form-control-file custom-file-input" accept="image/*">
                                        <div class="custom-file-label">选择图标...</div>
                                    </div>
                                    <small class="form-text text-muted my-2">支持JPG、PNG格式，建议为正方形，大小不超过1MB</small>
                                </div>
                                
                                <div class="preview-container">
                                    {% if category.icon %}
                                        <img id="icon-preview" src="{{ category.icon.url }}" alt="预览图" class="img-preview">
                                    {% elif category.icon_url %}
                                        <img id="icon-preview" src="{{ category.icon_url }}" alt="预览图" class="img-preview">
                                    {% else %}
                                        <img id="icon-preview" src="/static/dashboard/img/placeholder.jpg" alt="预览图" class="img-preview">
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="form-group mt-3">
                                <label for="icon_url">或者使用图标URL</label>
                                <input type="text" id="icon_url" name="icon_url" class="form-control" value="{{ category.icon_url|default:'' }}" placeholder="http://...">
                                <small class="form-text text-muted">如果不上传图标文件，可以填写图标URL</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-save">
                    <i class="fas fa-save"></i> 保存分类
                </button>
                <a href="{% url 'dashboard:category_list' %}" class="btn btn-light ml-2">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 图标文件预览
        const iconFileInput = document.getElementById('icon_file');
        const iconPreview = document.getElementById('icon-preview');
        const fileLabel = document.querySelector('.custom-file-label');
        
        if (iconFileInput && iconPreview) {
            iconFileInput.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const file = this.files[0];
                    
                    // 检查文件大小
                    const fileSize = file.size / 1024 / 1024; // 转换为MB
                    if (fileSize > 1) {
                        alert('图标大小不能超过1MB');
                        this.value = '';
                        return;
                    }
                    
                    fileLabel.textContent = file.name;
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        iconPreview.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
        
        // 图标URL预览
        const iconUrlInput = document.getElementById('icon_url');
        if (iconUrlInput && iconPreview) {
            iconUrlInput.addEventListener('input', function() {
                if (this.value) {
                    iconPreview.src = this.value;
                } else {
                    // 如果已上传图片文件，则保持图片文件的预览
                    if (iconFileInput.files && iconFileInput.files[0]) {
                        // 保持文件预览
                    } else {
                        iconPreview.src = '/static/dashboard/img/placeholder.jpg';
                    }
                }
            });
        }
        
        // 表单验证
        const form = document.querySelector('form');
        form.addEventListener('submit', function(event) {
            const name = document.getElementById('name').value.trim();
            
            let isValid = true;
            let errorMessage = '';
            
            if (!name) {
                errorMessage += '请输入分类名称\n';
                isValid = false;
            }
            
            if (!isValid) {
                event.preventDefault();
                alert('表单验证失败：\n' + errorMessage);
            }
        });
    });
</script>
{% endblock %} 